<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<form @submit="formSubmit" reportSubmit="true">
            <view class="block">
                <view class="user-money">账户剩余金额：{{data.price}}元</view>
                <view class="flex-row cash-max-day" v-if="data.cash_max_day!=-1">
                    <view class="flex-y-center">今日剩余提现金额{{data.cash_max_day}}元</view>
                    <view @tap="showCashMaxDetail" class="cash-max-detail">详情</view>
                </view>
            </view>
            <view class="flex-row block">
                <view class="flex-grow-0 flex-y-center cash-cny">￥</view>
                <view class="flex-grow-1 flex-y-center">
                    <input class="cash-input" name="cash" :placeholder="'输入'+data.custom.words.cash_money.name" placeholderStyle="color:#bbb;font-size:13pt" type="digit"></input>
                </view>
            </view>
            <view class="block" style="background: none;border: none">
                <view class="cash-min">{{data.custom.words.cash_money.name}}不能小于{{data.share_setting.min_money}}元</view>
                <view class="cash-min" v-if="data.service_content">{{data.service_content}}</view>
            </view>
            <view class="block">
                <view class="pay-title">{{data.custom.words.cash_type.name}}</view>
                <view class="withdraw_type">
                    <view @tap="select" class="tixian" :data-index="index" v-if="item.is_show==true" v-for="(item,index) in data.pay_type_list" :key="item.id">
                        <view :class="['pay flex-row', data.selected==index?'active':'']">
                            <view class="flex-grow-0">
                                <image class="pay-img" :src="item.icon"></image>
                            </view>
                            <view class="flex-grow-0">{{item.name}}</view>
                            <image class="selected" :src="data.__wxapp_img.share.selected.url" v-if="data.selected==index"></image>
                        </view>
                    </view>
                </view>
            </view>
            <block v-if="data.selected==0">
                <view class="block flex-row" style="margin-top:20upx">
                    <view class="flex-grow-0 flex-y-center required">姓名</view>
                    <view class="flex-grow-1 flex-y-center">
                        <input class="cash-input" name="name" placeholder="请输入正确的姓名" placeholderStyle="color:#ccc;font-size:13pt" :value="data.name"></input>
                    </view>
                </view>
                <view class="block flex-row" style="margin-top:20upx">
                    <view class="flex-grow-0 flex-y-center required">账号</view>
                    <view class="flex-grow-1 flex-y-center">
                        <input class="cash-input" name="mobile" placeholder="请输入正确微信账号" placeholderStyle="color:#ccc;font-size:13pt" :value="data.mobile"></input>
                    </view>
                </view>
            </block>
            <block v-else-if="data.selected==1">
                <view class="block flex-row" style="margin-top:20upx">
                    <view class="flex-grow-0 flex-y-center required">姓名</view>
                    <view class="flex-grow-1 flex-y-center">
                        <input class="cash-input" name="name" placeholder="请输入正确的姓名" placeholderStyle="color:#ccc;font-size:13pt" :value="data.name"></input>
                    </view>
                </view>
                <view class="block flex-row" style="margin-top:20upx">
                    <view class="flex-grow-0 flex-y-center required">账号</view>
                    <view class="flex-grow-1 flex-y-center">
                        <input class="cash-input" name="mobile" placeholder="请输入正确支付宝账号" placeholderStyle="color:#ccc;font-size:13pt" :value="data.mobile"></input>
                    </view>
                </view>
            </block>
            <block v-else-if="data.selected==2">
                <view class="block flex-row" style="margin-top:20upx">
                    <view class="flex-grow-0 flex-y-center required">开户人</view>
                    <view class="flex-grow-1 flex-y-center">
                        <input class="cash-input" name="name" placeholder="请输入正确的姓名" placeholderStyle="color:#ccc;font-size:13pt" :value="data.name"></input>
                    </view>
                </view>
                <view class="block flex-row" style="margin-top:20upx">
                    <view class="flex-grow-0 flex-y-center required">开户行</view>
                    <view class="flex-grow-1 flex-y-center">
                        <input class="cash-input" name="bank_name" placeholder="请输入正确的银行名称" placeholderStyle="color:#ccc;font-size:13pt" :value="data.bank_name"></input>
                    </view>
                </view>
                <view class="block flex-row" style="margin-top:20upx">
                    <view class="flex-grow-0 flex-y-center required">账号</view>
                    <view class="flex-grow-1 flex-y-center">
                        <input class="cash-input" name="mobile" placeholder="请输入正确银行卡账号" placeholderStyle="color:#ccc;font-size:13pt" :value="data.mobile"></input>
                    </view>
                </view>
            </block>
            <view class="block" style="background: none;border: none;margin-top:68upx;">
                <button class="cash-btn" formType="submit">提交申请</button>
            </view>
        </form>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	function e(e, a) {
    return e = parseFloat(e), a = parseFloat(a), e > a ? a : e;
}
	export default {
		data() {
			return {
				data: {
        price: 0,
        cash_max_day: -1,
        selected: -1
    },
			};
		},
		onLoad: function(e) {myVue = this;
        myVue.getApp.page.onLoad(this, e);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this);
        var e = this, a = myVue.getApp.core.getStorageSync(myVue.getApp.const.SHARE_SETTING), t = myVue.getApp.core.getStorageSync(myVue.getApp.const.CUSTOM);
        e.setData({
            share_setting: a,
            custom: t
        }), myVue.getApp.request({
            url: myVue.getApp.api.share.get_price,
            success: function(a) {
                if (0 == a.code) {
                    var t = a.data.cash_last, i = "", n = "", s = "", o = "", c = e.data.selected;
                    t && (i = t.name, n = t.mobile, s = t.bank_name, o = t.type), e.setData({
                        price: a.data.price.price,
                        cash_max_day: a.data.cash_max_day,
                        pay_type: a.data.pay_type,
                        bank: a.data.bank,
                        remaining_sum: a.data.remaining_sum,
                        name: i,
                        mobile: n,
                        bank_name: s,
                        selected: c,
                        check: o,
                        cash_service_charge: a.data.cash_service_charge,
                        service_content: a.data.service_content,
                        pay_type_list: a.data.pay_type_list
                    });
                }
            }
        });
    },
    onPullDownRefresh: function() {},
		methods: {
			formSubmit: function(a) {
        var t = this, i = parseFloat(parseFloat(a.detail.value.cash).toFixed(2)), n = t.data.price;
        if (-1 != t.data.cash_max_day && (n = e(n, t.data.cash_max_day)), i) if (i > n) myVue.getApp.core.showToast({
            title: "提现金额不能超过" + n + "元",
            image: "/static/images/icon-warning.png"
        }); else if (i < parseFloat(t.data.share_setting.min_money)) myVue.getApp.core.showToast({
            title: "提现金额不能低于" + page.data.share_setting.min_money + "元",
            image: "/static/images/icon-warning.png"
        }); else {
            var s = t.data.selected;
            if (0 == s || 1 == s || 2 == s || 3 == s) {
                if (0 == s || 1 == s || 2 == s) {
                    if (!(p = a.detail.value.name) || void 0 == p) return void myVue.getApp.core.showToast({
                        title: "姓名不能为空",
                        image: "/static/images/icon-warning.png"
                    });
                    if (!(c = a.detail.value.mobile) || void 0 == c) return void myVue.getApp.core.showToast({
                        title: "账号不能为空",
                        image: "/static/images/icon-warning.png"
                    });
                }
                if (2 == s) {
                    if (!(o = a.detail.value.bank_name) || void 0 == o) return void myVue.getApp.core.showToast({
                        title: "开户行不能为空",
                        image: "/static/images/icon-warning.png"
                    });
                } else o = "";
                if (3 == s) var o = "", c = "", p = "";
                myVue.getApp.core.showLoading({
                    title: "正在提交",
                    mask: !0
                }), myVue.getApp.request({
                    url: myVue.getApp.api.share.apply,
                    method: "POST",
                    data: {
                        cash: i,
                        name: p,
                        mobile: c,
                        bank_name: o,
                        pay_type: s,
                        scene: "CASH",
                        form_id: a.detail.formId
                    },
                    success: function(e) {
                        t.getApp.core.hideLoading(), t.getApp.core.showModal({
                            title: "提示",
                            content: e.msg,
                            showCancel: !1,
                            success: function(a) {
                                a.confirm && 0 == e.code && t.getApp.core.redirectTo({
                                    url: "/pages/cash-detail/cash-detail"
                                });
                            }
                        });
                    }
                });
            } else myVue.getApp.core.showToast({
                title: "请选择提现方式",
                image: "/static/images/icon-warning.png"
            });
        } else myVue.getApp.core.showToast({
            title: "请输入提现金额",
            image: "/static/images/icon-warning.png"
        });
    },
    showCashMaxDetail: function() {
        myVue.getApp.core.showModal({
            title: "提示",
            content: "今日剩余提现金额=平台每日可提现金额-今日所有用户提现金额"
        });
    },
    select: function(e) {
        var a = e.currentTarget.dataset.index;
        a != this.data.check && this.setData({
            name: "",
            mobile: "",
            bank_name: ""
        }), this.setData({
            selected: a
        });
    }
		},
	}
</script>

<style scoped>
form {
    border-top: 1upx solid #eee;
    display: block;
    padding-bottom: 32upx;
}

.block {
    border-bottom: 1upx solid #e3e3e3;
    background: #fff;
    padding: 32upx 24upx;
}

.user-money {
    font-size: 15pt;
}

.cash-max-day {
    font-size: 9pt;
    margin-top: 18upx;
    color: #888;
}

.cash-cny {
    font-size: 19pt;
    color: #ff4544;
    line-height: 1.7;
}

.cash-input {
    font-size: 19pt;
    height: 100%;
    width: 100%;
    padding: 0 32upx;
}

.cash-min {
    font-size: 9pt;
}

.cash-btn {
    width: 100%;
    height: 100upx;
    background-color: #ff4544;
    color: #fff;
    text-align: center;
    font-size: 13pt;
    line-height: 100upx;
}

.cash-max-detail {
    border: 1upx solid #bbb;
    padding: 4upx 8upx;
    border-radius: 5upx;
    margin-left: 24upx;
}

.pay-title {
    font-size: 13pt;
    color: #353535;
    margin-bottom: 30upx;
}

.pay {
    border: 1upx #666 solid;
    padding: 16upx 32upx;
    position: relative;
}

.pay-img {
    width: 40upx;
    height: 40upx;
    margin-right: 16upx;
}

.active {
    border: 2upx #ff4544 solid;
}

.selected {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32upx;
    height: 32upx;
}

.required::after {
    content: '*';
    vertical-align: top;
    color: #ff4544;
}

.tixian {
    width: 200upx;
    display: inline-block;
    margin-left: 32upx;
    margin-top: 10upx;
}
</style>
